<template>
  <div class="edit-bar">
    <span>
      <i class="iconfont wos-menu-line mr5" />
      文件
    </span>
    <em></em>
    <span>
      <i class="iconfont wos-folder" />
    </span>
    <span>
      <i class="iconfont wos-save" />
    </span>
    <span>
      <i class="iconfont wos-print" />
    </span>
    <em></em>
    <ul class="edit-menu">
      <li class="checked">开始</li>
      <li>插入</li>
      <li>编辑</li>
      <li>页面</li>
      <li>批注</li>
      <li>工具</li>
      <li>保护</li>
      <li>转化</li>
    </ul>
  </div>
  <div class="edit-content"></div>
</template>

<style scoped lang="scss">
.edit-bar {
  padding-left: 15px;
  display: flex;
  align-items: center;
  height: 26px;

  > span {
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 5px;

    &:hover {
      background-color: rgb(217, 222, 225);
    }
  }

  > em {
    width: 1px;
    height: 18px;
    display: inline-block;
    margin: 0 10px;
    background-color: rgb(204, 208, 211);
  }

  > .edit-menu {
    display: flex;
    align-items: center;

    li {
      padding: 0 16px;
      position: relative;

      &:hover::after {
        background-color: rgb(178, 182, 184);
      }

      &.checked {
        color: rgb(192, 37, 73);

        &::after {
          background-color: rgb(192, 37, 73);
        }
      }

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: translateX(-50%);
        width: 26px;
        height: 2px;
        border-radius: 4px;
      }
    }
  }
}

.edit-content {
  width: calc(100% - 30px);
  height: 78px;
  margin: 6px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}
</style>
